react-i18next
Advanced tools
Internationalization for react done right. Using the i18next i18n ecosystem.
The react-i18next package is a powerful internationalization framework for React / React Native which is based on i18next. It provides a way to translate your application into multiple languages, handle plurals and formatting, and manage translations.
Translation
This feature allows you to translate text in your React components using the `t` function provided by the `useTranslation` hook.
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation();
return <p>{t('keyForTranslation')}</p>;
}Language Switching
This feature enables you to switch languages on the fly within your application by calling the `changeLanguage` method.
import { useTranslation } from 'react-i18next';
function ChangeLanguageButton() {
const { i18n } = useTranslation();
return (
<button onClick={() => i18n.changeLanguage('de')}>Change to German</button>
);
}Pluralization
This feature allows you to handle plural forms in translations depending on the count provided.
import { useTranslation } from 'react-i18next';
function MyComponent({ count }) {
const { t } = useTranslation();
return <p>{t('keyForPlural', { count })}</p>;
}Formatting
This feature allows you to format dates, numbers, and other values within your translations.
import { useTranslation } from 'react-i18next';
function MyComponent({ date, number }) {
const { t } = useTranslation();
return (
<div>
<p>{t('formattedDate', { date })}</p>
<p>{t('formattedNumber', { number })}</p>
</div>
);
}Namespaces
This feature allows you to organize your translations into namespaces, making it easier to manage large translation files.
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation('namespace1');
return <p>{t('namespace1:keyForTranslation')}</p>;
}LinguiJS is a readable, automated, and optimized (5 kb) internationalization for JavaScript. It is similar to react-i18next but uses a different API and has its own macro syntax for defining translations.
React Intl is part of FormatJS which provides internationalization support for React applications. It is similar to react-i18next in providing translations and formatting but uses a different API, including components like <FormattedMessage> and <FormattedNumber>.
This package provides a component for React that utilizes the Counterpart translation library. It is less feature-rich compared to react-i18next and is more suitable for simpler applications that do not require advanced features like pluralization or namespace support.
React Localize Redux provides localization support for React/Redux applications. It integrates with Redux for state management of translations and locale data, which is different from react-i18next's approach of using the i18next framework.
The documentation is published on react.i18next.com
Before: Your react code would have looked something like:
...
<div>Just simple content</div>
<div>
Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link>.
</div>
...
After: With the trans component just change it to:
...
<div>{t('simpleContent')}</div>
<Trans i18nKey="userMessagesUnread" count={count}>
Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>
...
Head over to the interactive playground at codesandbox.
Want to learn more about how seamless your internationalization and translation process can be?
Source can be loaded via npm, bower or downloaded from this repo.
# npm package
$ npm install react-i18next
# bower
$ bower install react-i18next
window.reactI18next
localization as a service - locize.com
Needing a translation management? Want to edit your translations with an InContext Editor? Use the orginal provided to you by the maintainers of i18next!
With using locize you directly support the future of i18next and react-i18next.
7.13.0
FAQs
Internationalization for react done right. Using the i18next i18n ecosystem.
The npm package react-i18next receives a total of 1,481,801 weekly downloads. As such, react-i18next popularity was classified as popular.
We found that react-i18next demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.